<template>
    <!-- // 封装的组件 -->
    <div>
        <!-- // title:导航栏中间的标题 @click-left:左边绑定的点击事件 @click-right:左边绑定的点击事件  right-text:右边提示文字 left-text:左边提示文字 left-arrow:左边图标-->
        <van-nav-bar :title="title" @click-left="onclickLeft" @click-right="onclickRight" right-text="退出" left-arrow
            left-text="返回" />
    </div>
</template>

<script>
export default {
    name: "index",
    props: {
        title: String,
    },
    methods: {
        // 左边绑定的点击事件
        onclickLeft() {
            this.$emit('onclickLeft');
        },
        // 左边绑定的点击事件
        onclickRight() {
            this.$emit('onclickRight');
        }
    }
};
</script>

<style scoped>
/* 样式上的一些修改 */
.van-nav-bar {
    background: #fff;
    height: 1.3333rem;
    width: 100%;
}

::v-deep .van-nav-bar__title {
    color: #333 !important;
    font-size: .48rem;
    font-weight: 600;
}

::v-deep .van-icon-arrow-left::before {
    color: #666 !important;
}

::v-deep .van-nav-bar__text {
    color: #666 !important;
}
</style>
